<template style='height: 100%'>
  <div id="bill" >
    <el-tabs v-model="billTab" type="card" @tab-click="handleClick">
      <el-tab-pane label="云际环境" name="first">
        <div id='pubCloudConsult'>
          <div>
            <div style='float: left;'>
              <!--              <el-button @click='importVdc' type='primary' size='mini' icon='el-icon-plus'>{{ $t('vdc.add') }}</el-button>-->
              <el-button @click='clickConsultDelete' type='danger' :disabled='deleteConsultDisabled' size='mini'
                         icon='el-icon-delete' class='button-margin'>{{ $t('vdc.delete') }}
              </el-button>
            </div>
          </div>

          <div style='padding-top: 40px'>
            <table-contain :height.sync="table.maxHeight">
              <el-table :data='tableConsultData' ref='multipleTable2' border highlight-current-row slot="table"
                        @current-change='handleConsultCurrentChange' :height="table.maxHeight">
                <el-table-column width='40'>
                  <template slot-scope='scope'>
                    <el-radio :label='scope.row' v-model='currentConsultSelectRow'><i></i></el-radio>
                  </template>
                </el-table-column>

                <!--                <el-table-column prop='id' :label="$t('vdc.consultId')" min-width='100' show-overflow-tooltip></el-table-column>-->
                <el-table-column prop='name' :label="$t('vdc.consultName')" min-width='100' show-overflow-tooltip></el-table-column>
                <!--                <el-table-column prop='note' :label="$t('vdc.consultState')" min-width='50'-->
                <!--                                 show-overflow-tooltip>-->
                <!--                  <template slot-scope='scope'>-->
                <!--                    <div v-html='getStateIcon(scope.row.note)' style='text-align: center;'></div>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <el-table-column prop='cloudPlatformNames' :label="$t('vdc.consultIds')" min-width='120'></el-table-column>
                <el-table-column
                  prop="createdAt"
                  :label="$t('vdc.consultCreateTime')"
                  min-width="120"
                  :formatter="formatDate">
                </el-table-column>

                <el-table-column
                  prop="updatedAt"
                  :label="$t('vdc.consultUpdateTime')"
                  min-width="120"
                  :formatter="formatDate">
                </el-table-column>
                <!--                <el-table-column prop='regionName' :label="$t('vdc.regionName')" min-width='120'></el-table-column>-->
                <!--                <el-table-column prop='secretId' :label="$t('vdc.secretId')" min-width='100'-->
                <!--                                 show-overflow-tooltip></el-table-column>-->
                <!--                <el-table-column prop='secretKey' :label="$t('vdc.secretKey')" min-width='100'-->
                <!--                                 show-overflow-tooltip>-->
                <!--                  <template slot-scope='scope'>-->
                <!--                    {{ scope.row.secretKey ? scope.row.secretKey : '*****' }}-->
                <!--                  </template>-->
                <!--                </el-table-column>-->


                <el-table-column :label="$t('vdc.operations')" align='center' min-width='80' style='text-align: center'>
                  <template slot-scope='scope'>
                    <el-button size='mini' type='text'
                               @click='showDetail(scope.$index,scope.row)'>{{ $t('btn.detail') }}
                    </el-button>
                    <el-button size='mini' type='text'
                               @click='consultEdit(scope.$index,scope.row)'>{{ $t('btn.edit') }}
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination slot='footer' @size-change='handleConsultSizeChange' @current-change='handleConsultCurrentPageChange'
                             :current-page='currentConsultPage' :page-sizes='[10,20,50,100]' :page-size='pageConsultSize'
                             layout='total, sizes, prev, pager, next' :total='totalConsultSize'>
              </el-pagination>
            </table-contain>
          </div>
        </div>

      </el-tab-pane>

      <el-tab-pane label="云商接入" name="default">
        <div id='pubCloud'>
          <div>
            <div style='float: left;'>
              <el-button @click='importVdc' type='primary' size='mini' icon='el-icon-plus'>{{ $t('vdc.add') }}</el-button>
              <el-button @click='clickDelete' type='danger' :disabled='deleteDisabled' size='mini'
                         icon='el-icon-delete' class='button-margin'>{{ $t('vdc.delete') }}
              </el-button>
            </div>
          </div>

          <div style='padding-top: 40px'>
            <table-contain :height.sync="table.maxHeight">
              <el-table :data='tableData' ref='multipleTable' border highlight-current-row slot="table"
                        @current-change='handleCurrentChange' :height="table.maxHeight">
                <el-table-column width='40'>
                  <template slot-scope='scope'>
                    <el-radio :label='scope.row' v-model='currentSelectRow'><i></i></el-radio>
                  </template>
                </el-table-column>
                <el-table-column prop='name' :label="$t('vdc.name')" min-width='100' show-overflow-tooltip></el-table-column>
                <el-table-column prop='note' :label="$t('vdc.state')" min-width='50'
                                 show-overflow-tooltip>
                  <template slot-scope='scope'>
                    <div v-html='getStateIcon(scope.row.note)' style='text-align: center;'></div>
                  </template>
                </el-table-column>
                <el-table-column prop='type' :label="$t('vdc.type')" min-width='120'></el-table-column>
                <el-table-column prop='cloudProvider' :label="$t('vdc.cloudProvider')" min-width='120'></el-table-column>
                <el-table-column prop='regionName' :label="$t('vdc.regionName')" min-width='120'></el-table-column>
                <el-table-column prop='secretId' :label="$t('vdc.secretId')" min-width='100'
                                 show-overflow-tooltip></el-table-column>
                <el-table-column prop='secretKey' :label="$t('vdc.secretKey')" min-width='100'
                                 show-overflow-tooltip>
                  <template slot-scope='scope'>
                    {{ scope.row.secretKey ? scope.row.secretKey : '*****' }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('vdc.operations')" align='center' min-width='80' style='text-align: center'>
                  <template slot-scope='scope'>
                    <el-button size='mini' type='text'
                               @click='edit(scope.$index,scope.row)'>{{ $t('btn.edit') }}
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination slot='footer' @size-change='handleSizeChange' @current-change='handleCurrentPageChange'
                             :current-page='currentPage' :page-sizes='[10,20,50,100]' :page-size='pageSize'
                             layout='total, sizes, prev, pager, next' :total='totalSize'>
              </el-pagination>
            </table-contain>
          </div>
        </div>
      </el-tab-pane>


    </el-tabs>
    <el-dialog title="磋商详情" :visible.sync="dialogFormVisible">
      <div style="display: flex;">
        <el-table :data="gridData" style="flex: 1;">
          <el-table-column property="name" label="云商名称" ></el-table-column>
          <el-table-column property="type" label="平台类型"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>



</template>
<style lang='scss'>
@import '../../../assets/iconfont/iconfont.css';
#pubCloud {
  & .el-button + .el-button {
    margin-left: 0px;
  }

  .el-input--medium .el-input__inner {
    height: 32px;
  }
}
.cloud-status-normal {
  color: #21903A;
}

.cloud-status-error {
  color: #CF3736;
}
</style>
<script>
import model from '@/public/indexModel.js'
import local from './js/local'
import errGif from '@/assets/vmHost/windows.png'
import pubCloudApi from '@/api/pubCloudApi.js'
import pubCloudUtil from '../cloudList/js/pubCloudUtil'
import moment from 'moment'
export default {
  mixins: [model],
  name: 'pubCloud',
  i18n: {
    messages: local
  },
  data() {
    return {
      tableData: [],
      tableConsultData: [],
      currentPage: 1,
      currentConsultPage: 1,
      totalSize: 10,
      totalConsultSize: 10,
      pageSize: 10,
      pageConsultSize: 10,
      billTab: 'first',
      errGif,
      deleteDisabled: true,
      deleteConsultDisabled: true,
      dialogFormVisible: false,
      gridData: [],
      formLabelWidth: '120px',
      form: {
        datacenter: '',
        name: ''
      },
      currentSelectRow: '',
      currentConsultSelectRow: '',
      byteUnit: {
        MB: 1024 * 1024,
        GB: 1024 * 1024 * 1024,
        TB: 1024 * 1024 * 1024 * 1024
      }
    }
  },
  mounted() {
    this.getTableData()
    this.getConsultTableData()
  },
  methods: {
    getStateIcon(state) {
      return pubCloudUtil.getVmStateHtml(state)
    },
    handleClick(tab, event) {
      // if (tab.name == 'default') {
      //   this.getDefaultTableData()
      // } else {
      //   this.getExtendTableData()
      // }
    },
    handleSizeChange(val) {
      debugger
      this.pageSize = val
      this.getTableData()
    },
    handleConsultSizeChange(val) {
      debugger
      this.pageConsultSize = val
      this.getConsultTableData()
    },
    handleCurrentChange(val) {

      this.currentSelectRow = val
      this.deleteDisabled = false
    },
    handleCurrentPageChange(val) {
      this.currentPage = val
      this.getTableData()
    },
    handleConsultCurrentChange(val) {
      this.currentConsultSelectRow = val
      this.deleteConsultDisabled = false
    },
    handleConsultCurrentPageChange(val) {
      this.currentConsultPage = val
      this.getConsultTableData()
    },
    formatDate(row, column, cellValue, index) {
      // 假设你的日期是ISO 8601字符串，例如 "2020-01-01T00:00:00.000Z"
      // 你可以根据实际情况调整格式
      return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    getTableData() {
      const self = this
      self.createDefaultMLoading('#pub')
      self.mloading.show()
      pubCloudApi.vdcListRequest({
        pageNo: this.currentPage, pageSize: this.pageSize
      }).then((data) => {
        self.formatTableData(data.data.pageData)
        self.totalSize = data.data.total
        console.log("云商接入接口 返回total"+ self.totalSize)
        debugger
        self.mloading.hide()
      }).catch((error) => {
        self.mloading.hide()
        console.log(error)
      })
    },
    getConsultTableData() {
      const self = this
      self.createDefaultMLoading('#pub')
      self.mloading.show()
      pubCloudApi.consultListRequest({
        pageNo: this.currentConsultPage, pageSize: this.pageConsultSize
      }).then((data) => {
        self.formatConsultTableData(data.data.pageData)
        self.totalConsultSize = data.data.total
        self.mloading.hide()
      }).catch((error) => {
        self.mloading.hide()
        console.log(error)
      })
    },
    formatTableData(data) {
      if (data && data.length > 0) {
        this.tableData = []
        for (var i in data) {
          var tableData = {
            id: data[i].id,
            name: data[i].platformName,
            type: data[i].apiProvider,
            cloudProvider: data[i].cloudProvider,
            regionName: data[i].regionName,
            secretId: data[i].secretId,
            secretKey: data[i].secretKey,
            note: data[i].note
          }
          this.tableData.push(tableData)
        }
      }
    },
    formatConsultTableData(data) {

      if (data && data.length > 0) {
        this.tableConsultData = []
        for (var i in data) {
          var detailData = []
          const cloudPlatformNamesArray = data[i].cloudPlatformNames.split('_')

          const cloudPlatformIdsArray = data[i].cloudPlatformIds != null ? data[i].cloudPlatformIds.split(',') : null
          if (cloudPlatformIdsArray != null) {
            for (let j = 0; j < cloudPlatformIdsArray.length; j++) {
              detailData.push({
                id: cloudPlatformIdsArray[j],
                name: cloudPlatformNamesArray[j],
                type: '公有云'
              })
            }
          }

          const privatePlatformIdsArray = data[i].privatePlatformIds != null ? data[i].privatePlatformIds.split(',') : null
          if (privatePlatformIdsArray != null) {
            for (let j = 0; j < privatePlatformIdsArray.length; j++) {
              detailData.push({
                id: privatePlatformIdsArray[j],
                name: cloudPlatformNamesArray[(cloudPlatformIdsArray!=null ? cloudPlatformIdsArray.length : 0) + j ],
                type: '私有云'
              })
            }
          }

          var tableData = {
            id: data[i].id,
            name: data[i].name,
            cloudPlatformIds: data[i].cloudPlatformIds,
            cloudPlatformNames: data[i].cloudPlatformNames, // 包括公有云和私有云的名称集合，使用下横线分割
            privatePlatformIds: data[i].privatePlatformIds,
            // privatePlatformNames: data[i].cloudPlatformNames,
            createdAt: data[i].createdAt,
            updatedAt: data[i].updatedAt,
            remark: data[i].remark,
            detailData: detailData
          }
          this.tableConsultData.push(tableData)
        }
      }
    },
    importVdc() {
      this.$router.push({ name: 'pubCloudImport', params: { previousPage: 'pubCloud', routeLevel: 3 }})
    },
    clickDelete() {
      const self = this
      this.$confirm(this.$t('confirm.delete_confirm'), this.$t('confirm.tip'), {
        confirmButtonText: this.$t('btn.ok'),
        cancelButtonText: this.$t('btn.cancel'),
        type: 'warning'
      }).then(() => {
        const rowId = self.currentSelectRow['id']
        self.mloading.show()
        pubCloudApi.cloudDeleteRequest({
          id: rowId
        }).then(() => {
          this.$message({ type: 'success', message: this.$t('confirm.delete_success') })
          self.mloading.hide()
          this.getTableData()
        }).catch((error) => {
          this.$message({ type: 'error', message: error.msg })
          self.mloading.hide()
        })
      })
    },
    clickConsultDelete() {
      const self = this
      this.$confirm(this.$t('confirm.delete_confirm'), this.$t('confirm.tip'), {
        confirmButtonText: this.$t('btn.ok'),
        cancelButtonText: this.$t('btn.cancel'),
        type: 'warning'
      }).then(() => {

        const rowId = self.currentConsultSelectRow['id']
        // const rowId = self.$refs.multipleTable2.currentSelectRow['id']
        self.mloading.show()
        pubCloudApi.cloudConsultDeleteRequest({
          id: rowId
        }).then(() => {
          this.$message({ type: 'success', message: this.$t('confirm.delete_success') })
          self.mloading.hide()
          this.getTableData()
          this.getConsultTableData()
        }).catch((error) => {
          this.$message({ type: 'error', message: error.msg })
          self.mloading.hide()
        })
      })
    },
    edit(index, row) {
      this.$router.push({
        name: 'pubCloudEdit',
        params: { previousPage: 'editPubCloud', isAdd: false, id: row.id, routeLevel: 3, type: row.type }
      })
    },
    consultEdit(index, row) {
      this.$router.push({
        name: 'pubCloudConsultEdit',
        params: { previousPage: 'pubCloudConsultEdit', isAdd: false,
          id: row.id,
          name: row.name,
          remark: row.remark,
          cloudPlatformIds: row.cloudPlatformIds,
          cloudPlatformNames: row.cloudPlatformNames,
          routeLevel: 3,
          type: row.type }
      })
    },
    showDetail(index, row) {

      this.gridData = row.detailData
      this.dialogFormVisible = true
      // this.$router.push({
      //   name: 'pubCloudConsultEdit',
      //   params: { previousPage: 'pubCloudConsultEdit', isAdd: false,
      //     id: row.id,
      //     name: row.name,
      //     remark: row.remark,
      //     cloudPlatformIds: row.cloudPlatformIds,
      //     cloudPlatformNames: row.cloudPlatformNames,
      //     routeLevel: 3,
      //     type: row.type }
      // })
    }
  }
}
</script>

